<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="医院名称">
        <el-input v-model="hospset.hosname" />
      </el-form-item>
      <el-form-item label="医院编号">
        <el-input v-model="hospset.hoscode" />
      </el-form-item>
      <el-form-item label="api地址">
        <el-input v-model="hospset.apiUrl" />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="hospset.contactsName" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="hospset.contactsPhone" />
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import hospset from '@/api/yygh/hospset'
export default {
  data() {
    return {
      hospset: {},
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },
  // 需要根据页面传的用户id来判断用户的操作是新增还是修改,如果id为null 就不执行查询对象的方法
  // 如果id不为null需要执行查询方法来进行数据的回显
  created() {
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id
      this.fetchDataById(id)
    }
  },
  methods: {
    saveOrUpdate() {
      this.saveBtnDisabled = true
      // 根据医院设置的id来判断是保存操作还是修改操作
      // 在if判断中如果直接写对象中的属性判断对象属性中的值不为null
      if (this.hospset.id) {
        // id值不为空  执行修改方法
        this.updateData()
      } else {
        // id值为空 执行添加方法
        this.saveData()
      }
    },

    // 保存
    saveData() {
      // 表单的保存
      hospset.save(this.hospset).then(res => {
        return this.$message({
        // 1.需要提示用户数据保存成功
          type: 'success',
          message: '医院设置数据保存成功!'
        })
      }).then((res) => {
        // 2.重新回到列表页面中
        this.$router.push({ path: '/yygh/hospset/list' })
      }).catch((res) => {
        // 3.如果数据保存失败,提示保存失败的信息
        this.$message({
          // 信息的类型
          type: 'error',
          message: '医院设置数据保存失败!'
        })
      })
    },
    // 因为编辑功能和保存功能用的是同一页面,需要根据id判断查询数据
    fetchDataById(id) {
      hospset.fetchDataById(id).then(res => {
        // 将查询到的数据赋值给表单中绑定的对象
        this.hospset = res.data.item
      }).catch(res => {
        // 如果查询失败提示失败的信息
        this.$message({
          type: 'error',
          message: '医院设置数据查询失败!'
        })
      })
    },
    // 医院设置的更新方法
    updateData() {
      this.saveBtnDisabled = true
      // 调用更新方法
      hospset.updateData(this.hospset).then(res => {
        // 修改成功的提示消息
        return this.$message({
          type: 'success',
          message: '医院设置数据修改成功!'
        })
      }).then(res => {
        // 需要跳转到list的列表
        this.$router.push({ path: '/yygh/hospset/list' })
      }).catch(res => {
        // 修改数据失败
        this.$message({
          type: 'error',
          message: '医院设置数据修改失败!'
        })
      })
    }
  }
}
</script>
